$dropdown-gap-vertical: $base-font-size / 2;
$dropdown-gap-horizontal: $base-font-size;

.dropdown {
  position: relative;
}

.menu {
  @include remove-focus-ring;

  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 2px 2px rgba(#000, 0.15);
  display: block;
  left: 0;
  list-style: none;
  margin: 0;
  padding: $dropdown-gap-vertical 0;
  position: absolute;
  top: 100%;
}

.item {
  display: block;

  &-button {
    @include remove-focus-ring;

    appearance: none;
    background-color: #fff;
    border: 0;
    display: block;
    font-size: $base-font-size;
    line-height: $base-font-size;
    padding: $dropdown-gap-vertical $dropdown-gap-horizontal;
    text-align: left;
    user-select: none;
    white-space: nowrap;
    width: 100%;

    &,
    &:active {
      color: inherit;
    }

    &:focus,
    &:hover {
      background-color: mix(#000, #fff, 5%);

      &:active {
        background-color: mix(#000, #fff, 10%);
      }
    }
  }
}

.divider {
  border-top: 1px solid #eee;
  margin: $dropdown-gap-vertical 0;
}
